<html>
	<head>
	
	<link rel="stylesheet" href="css_jss/bootstrap.min.css" type="text/css">
	<link rel="stylesheet" href="css_jss/custom.css" type="text/css">
	
	<link rel="stylesheet" href="css_jss/footable.core.min.css" type="text/css">
	<!--<link rel="stylesheet" href="cart.css" type="text/css">-->
	<script type="text/javascript" src="css_jss/jquery-1.11.1.min.js"  ></script>
	<script type="text/javascript" src="css_jss/bootstrap.min.js"  ></script>
	<script type="text/javascript" src="css_jss/custom.js"  ></script>
	<script type="text/javascript" src="css_jss/footable.min.js"  ></script>
	
	</head>


<body style="background-color:transparent;">
<br/>
<br/>
<br/>
	<div aria-hidden="false" style="display: block;" class="modal fade in" id="cartModal">
    <div class="modal-dialog">
      <div class="modal-content" id="cartContent">
<div class="modal-header">
<button type="button" class="close" onclick="parent.close_more_IFrame()" " data-dismiss="modal" aria-hidden="true" title="Close Details">×</button>
<h3 class="modal-title">Bones</h3>

</div>
  
  <div class="modal_body custom-modal-body" id="ModelProductData">
  <img src="img/bones.jpg" style="float:left; margin:10px">
  <p><strong>Year : </strong> 2014</p>
  <p><strong>Cast : </strong> Emily Deschanel, David Boreanaz, Michaela Conlin,</p>
  <p><strong>Price : </strong> 4</p>
  <p><strong>Director : </strong>Hart Hanson </p>
  <p><strong>Number OF Disks :</strong>  4</p>
  <p><strong>Rate : </strong>8.1</p>
  <p><strong>Movie Deuration : </strong>450</p>
  <p><strong>Subtitle : </strong>Arabic/English </p>
  <p><strong>Description : </strong> A forensic anthropologist and a cocky FBI agent build a team to investigate death causes. And quite often, there isn\'t more to examine than rotten flesh or mere bones.</p>
	
	
	<div style="float:left;">
		<div style="margin:0px auto;padding:5px;">
			<img  src="img/add_to_cart_btn.jpg">
		</div>	
		<div style="margin:0px auto;padding:5px;">
			<img  src="img/add_to_wish_btn.jpg">
		</div>
	</div>
	
	<div style="float:left;">
		<div style="margin:0px auto;padding:5px;">
			<img  style="cursor:pointer;"  src="img/like.jpg">
		</div>	
	</div>
	
	
	
	
	
		
	
									<div style="padding:10px;clear:both;">
											<div style="float:left;padding:5px;">
												<p style="font-weight:bold;color:black;"><b>32 Sold</b></p>
											</div>
											<div style="float:left;padding:5px;">
												<p style="font-weight:bold;color:black;"><b>10 Likes</b></p>
											</div>
										</div>
										
										<div style="padding:10px;clear:both;">
											<div style="float:left;padding:10px;">
												<p style="font-weight:bold;cursor:pointer;color:black;"><b>Trailer</b></p>
											</div>
											<div style="float:left;padding:10px;">
												<p style="font-weight:bold;cursor:pointer;color:black;" ><b>IMDb</b></p>
											</div>
										</div>	
			
  
  
  <p><strong></strong> </p>
  </div>
  <div class="modal-footer">
  </div>


<script type="text/javascript">
  $(document).ready(function($) {
    var isAjaxReq = true;

    
      var $addToCartBtn = $('#addToCartBtn'),
              $product_qty = $('#product_qty'),
              $shopping_cart_btn = $('.shopping-cart-btn');

      $('#addToCart').submit(function(e){
        e.preventDefault();

        product_qty = $product_qty.val();

        if(product_qty <= 0)
        {
           return false;
        }

        var $this = $(this),
            formAction = $this.attr('action');

             if($addToCartBtn.hasClass('disabled'))
              {
                return false;
              }

        $addToCartBtn.addClass('disabled');
       $.post(formAction, $this.serialize(),function(data){
              $addToCartBtn.html('Update <i class="glyphicon glyphicon-shopping-cart icon-white"></i>')
              .removeClass('disabled');

              $shopping_cart_btn.html(data.cartBtnString).find('i.icon-shopping-cart').removeClass('icon-shopping-cart').addClass('glyphicon glyphicon-shopping-cart');

    /*          if(data.validationErrors)
              console.log(data.validationErrors);*/

       }, "JSON")
       .fail(function(error){
          /* if(error)
          console.log(error.responseText);*/
       });

       });

      $('#size,#color').on('change', checkCartForItem);

      function checkCartForItem(){

        $addToCartBtn.addClass('disabled');

        var cartCheckURL = "http://jqueryphpstoreshop-demo.livelyworks.net/1.2.0/product/checkOldQty/13";

        $.post(cartCheckURL, $('#addToCart').serialize(), function(data){
              $product_qty.val(data.qty ? data.qty : 1);

              if(data.qty > 0){
                 $addToCartBtn.html('Update <i class="glyphicon glyphicon-shopping-cart icon-white"></i>');
              }else{
                 $addToCartBtn.html('Add to <i class="glyphicon glyphicon-shopping-cart icon-white"></i>');
              }

              $addToCartBtn.removeClass('disabled');

       }, "JSON")
       .fail(function(error){

       });

      }

      $('.qty-btn').on('click',function(e){
         e.preventDefault();
          var $this = $(this),
          product_qty_val = Number($product_qty.val());

          if($this.hasClass('increment_qty')){
            $product_qty.val( product_qty_val + 1);
          }else{
            var newQtyVal = (product_qty_val - 1);
            $product_qty.val((newQtyVal <= 0) ? 1 : newQtyVal);
          }
      });
  });
</script></div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div>
</body>  
  </html>